<script setup lang="ts">
import { ref,watch } from 'vue'
import LoginForm from "./components/LoginForm.vue"
import VerificationForm from "./components/VerificationForm.vue"
import { loginApi, getTestRoleApi, getAdminRoleApi } from '@/api/login'
import { useAppStore } from '@/store/modules/app'
import { usePermissionStore } from '@/store/modules/permission'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
const currentForm = ref<'login' | 'verification'>('login')
const loginData = ref({})

const appStore = useAppStore()
const userStore = useUserStore()
const permissionStore = usePermissionStore()
const { currentRoute, addRoute, push } = useRouter()

const redirect = ref<string>('')

watch(
  () => currentRoute.value,
  (route) => {
    redirect.value = route?.query?.redirect as string
  },
  { immediate: true }
)

const handleLoginSuccess = async (formData: any) => {
  loginData.value = formData
  currentForm.value = 'verification'
}

const handleVerification = async (formData: any) => {
  try {
    const res = await loginApi(formData)
    
    if (res) {
      // 存储用户信息等操作
      userStore.setUserInfo(res.data)
      if (appStore.getDynamicRouter) {
        await getRole(formData)
  } else {
    await permissionStore.generateRoutes('static').catch(() => {})
    permissionStore.getAddRouters.forEach((route) => {
      addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
    })
    permissionStore.setIsAddRouters(true)
    push({ path: redirect.value || permissionStore.addRouters[0].path })
  }
      // 路由处理
      // if (appStore.getDynamicRouter) {
      //   await getRole(formData)
      // } else {
      //   await permissionStore.generateRoutes('static').catch(() => {})
      //   permissionStore.getAddRouters.forEach((route) => {
      //     addRoute(route)
      //   })
      //   permissionStore.setIsAddRouters(true)
      //   push({ path: redirect.value || permissionStore.addRouters[0].path })
      // }
    }
  } catch (error) {
    console.error(error)
  }
}

const getRole = async (formData: any) => {
  const params = {
    roleName: formData.username
  }
  const res = appStore.getDynamicRouter && appStore.getServerDynamicRouter
    ? await getAdminRoleApi(params)
    : await getTestRoleApi(params)
    
  if (res) {
    const routers = res.data || []
    userStore.setRoleRouters(routers)
    
    appStore.getDynamicRouter && appStore.getServerDynamicRouter
      ? await permissionStore.generateRoutes('server', routers).catch(() => {})
      : await permissionStore.generateRoutes('frontEnd', routers).catch(() => {})

    permissionStore.getAddRouters.forEach((route) => {
      addRoute(route as RouteRecordRaw)
    })
    permissionStore.setIsAddRouters(true)
    push({ path: redirect.value || permissionStore.addRouters[0].path })
  }
}

const backToLogin = () => {
  currentForm.value = 'login'
}
</script>

<template>
  <div class="h-[100%] relative flex justify-center items-center bg">
    <Transition
      appear
      enter-active-class="animate__animated animate__bounceInRight"
    >
      <div class="login-container">
        <LoginForm
          v-if="currentForm === 'login'"
          @to-verification="handleLoginSuccess"
         
        />
        <VerificationForm
          v-else
          :login-data="loginData"
          @to-login="backToLogin"
          @submit-verification="handleVerification"
        
        />
      </div>
    </Transition>
  </div>
</template>

<style lang="less" scoped>
.bg {
  background: url("../../assets/login/login-bg.png") no-repeat center;
  background-size: 100% 100%;
  background-size: cover;
  display: flex;
  justify-content: end;
  align-items: center;
  padding-right: 230px;
}
.login-container {
  display: flex;
  flex-direction: column;
  width: 510px;
  height: 588px;
  // padding: 60px 55px 133px 55px;
  background-color: rgba(255, 255, 255, 0.36);
  border: 1px solid #ffffff;
  border-radius: 16px 16px 16px 16px;
  // filter: drop-shadow(-25px -1px 22px rgba(0, 0, 0, 0.34901960784313724));
}
</style>